/*
 * @Description: 进入页
 * @Author: xuyao
 * @Date: 2019-04-17 15:55:02
 * @LastEditors: xuyao
 * @LastEditTime: 2019-06-13 16:39:08
 */

import React, { Component } from 'react';
import CanvasNest from 'canvas-nest.js';
import innerCircleBig from './images/entrance/innerCircleBig.png';
import innerCircleSmall from './images/entrance/innerCircleSmall.png';
import NumAnimate from './numAnimate';
import './index.less';

export default class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      //
    };
    this.cnAnimate = React.createRef();
    this.naContainer = React.createRef();
  }

  componentDidMount() {
    let naEle = this.naContainer.current;
    this.na = new NumAnimate(naEle);
    let ele = this.cnAnimate.current;
    const config = {
      color: '6,211,229',
      count: 90,
      zIndex: 1,
      pointColor: '6,211,229',
      opacity: 0.8,
    };
    this.cn = new CanvasNest(ele, config);
  }
  componentWillUnmount() {
    this.na.destroy();
  }
  render() {
    return (
      <div className="entrance" ref={this.cnAnimate}>
        <div className="numAnimate" ref={this.naContainer}></div>
        <div className="outerCirle">
          <div className="innerCircleBig">
            <img src={innerCircleBig} />
          </div>
          <div className="innerCircleSmall">
            <img src={innerCircleSmall} />
          </div>
        </div>
      </div>
    );
  }
}
